<!--
 * @description: 
 * @LastEditTime: 2024-02-06 23:55:36
-->
<template>
  <view class="mail-page">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <u-cell center isLink @click="goDetail(item)">
          <view class="mail-icon" slot="icon">
            <u-avatar
              shape="circle"
              size="48rpx"
              :src="require('@/static/user/msg.png')"
            ></u-avatar>
            <u-badge
              v-if="!item.isRead"
              :isDot="true"
              :absolute="true"
              :offset="['4rpx', '4rpx']"
            ></u-badge>
          </view>
          <view class="mail-title" slot="title">
            <view class="mail-title__name line-1">
              {{ item.type == 2 ? item.sendUserName : '系统消息' }}
            </view>

            <text>{{ item.createTime }}</text>
          </view>

          <text
            slot="label"
            class="line-1"
            style="font-size: 22rpx; color: #999; width: 500rpx; margin-top: 4rpx"
          >
            {{ item.content }}
          </text>
        </u-cell>
      </u-list-item>
      <view v-if="listData.length === 0" style="text-align: center; padding-top: 50rpx">
        暂无数据
      </view>
    </u-list>
    <shop-footer ref="vShopFooter" currentUrl="/pages/new/mail"></shop-footer>
    <u-popup :show="showMsg" mode="center" closeable round="10rpx" @close="close">
      <view class="mail-popup">
        <view class="mail-popup__title">
          {{ popupData.type == 2 ? popupData.sendUserName : '系统消息' }}
          <text>{{ popupData.createTime }}</text>
        </view>
        <view class="mail-popup__content">
          {{ popupData.content }}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import shopFooter from '@/common/public/shop_footer'
export default {
  components: {
    shopFooter,
  },
  data() {
    return {
      listData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      showMsg: false,
      popupData: {},
    }
  },
  onLoad() {},
  onShow() {
    this.getList()
  },
  async onPullDownRefresh() {
    this.listData = []
    this.pageNo = 1
    await this.getList()
    uni.stopPullDownRefresh()
  },
  methods: {
    scrolltolower() {
      let totalPageNo = Math.ceil(this.total / this.pageSize)
      if (this.pageNo < totalPageNo) {
        ++this.pageNo
        this.getList()
      }
    },
    getList() {
      return new Promise((resolve) => {
        this.$request('/message/myMessagePage', {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }).then((res) => {
          if (this.pageNo === 1) this.listData = []
          this.listData = [...this.listData, ...res.result.records]
          this.total = res.result.total
          resolve(res.result)
        })
      })
    },
    goDetail(val) {
      this.showMsg = true
      this.popupData = val
      val.isRead = 1
      this.readMsg(val.id)
    },
    readMsg(id) {
      this.$request('/message/readMessage', {
        id,
      }).then(() => {})
    },
    close() {
      this.showMsg = false
    },
  },
}
</script>

<style lang="scss" scoped>
.mail-page {
  background-color: #fff;
  .mail-icon {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    margin-right: 10rpx;
    background-color: #eee;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mail-title {
    display: flex;
    .mail-title__name {
      width: 320rpx;
    }
    text {
      margin-left: 8rpx;
      font-size: 24rpx;
      color: #999;
    }
  }

  .mail-popup {
    width: 600rpx;
    height: 860rpx;
    padding: 24rpx;
    .mail-popup__title {
      font-size: 32rpx;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 10rpx;
      text {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    .mail-popup__content {
      margin: 16px 0;
      height: calc(100% - 140rpx);
      overflow: auto;
    }
  }
}
</style>
